<template>
    <!-- component/getCoupon/getCoupon.wxml -->
    <view class="my-dialog" v-if="showDialog">
        <view class="my-mask"></view>
        <view class="my-container">
            <view class="v-center between titleBar">
                <text>领券</text>
                <image @tap="hide" class="close" src="/static/file/images/close.png"></image>
            </view>
            <view class="couponList">
                <view class="coupon_item" :data-item="item" v-for="(item, i) in coupons" :key="i">
                    <view class="top">
                        <view class="left_item algin">
                            <view class="money">
                                <text>￥</text>
                                <text class="num">{{ item.price }}</text>
                            </view>
                        </view>
                        <view class="center_item v-center">
                            <view class="text">{{ item.info }}</view>
                            <view class="date">{{ item.start }}到期</view>
                        </view>
                        <view class="right_item algin">
                            <text @tap="use" class="use_btn">立即使用</text>
                        </view>
                    </view>

                    <view class="next">
                        {{ item.range }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// component/getCoupon/getCoupon.js
// 领取优惠券组件
export default {
    data() {
        return {
            showDialog: false,
            coupons: [],
            i: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        couponList: {
            type: Array
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        show() { 
			 this.showDialog = true;
        },
        hide() {
             this.showDialog = false;
        },
        /*
         * 内部私有方法建议以下划线开头
         * triggerEvent 用于触发事件
         */
        use(e) {
            //触发成功回调
            this.$emit('use', {
                detail: e
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './mycoupon.css';
</style>
